<template>
	<div>
		<div>
			<span>
				<el-input size='mini' placeholder='价格套餐名称' v-model='filter.price_name' style='width:350px'></el-input>
			</span>
			<span class='m-l-20'>
				<el-button size='mini' type='primary' icon='el-icon-search' @click='search'>搜索</el-button>
			</span>
			<span class='m-l-20'>
				<router-link to='/price/add'><el-button size='mini' type='primary'>新增</el-button></router-link>
			</span>
		</div>
		<section class='m-t-50 content-box'>
			<el-table style='width:100%;font-size:12px;' ref='multipleTable' :data='listData'>
				<el-table-column label='套餐名称'>
					<template slot-scope='scope'>{{ scope.row.price_name }}</template>
				</el-table-column>
				<el-table-column label='计费类型'>
					<template slot-scope='scope'>{{ scope.row.charge_type == 1 ? '计时' : '计费' }}</template>
				</el-table-column>
				<el-table-column label='最小计费单位(分钟/度)' align='center'>
					<template slot-scope='scope'>{{ scope.row.charge_unit }} {{units[scope.row.charge_type]}}</template>
				</el-table-column>
				<el-table-column label='常用预设'>
					<template slot-scope='scope'>
						<div style='line-height:26px;'>
							<div v-for='v in scope.row.options'>{{v.a}}元/{{v.q}}{{ scope.row.charge_type == 1 ? '小时' : '度' }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label='充满临界功率' align='center'>
					<template slot-scope='scope'>
						<span>{{scope.row.critical_power }}W</span>
					</template>
				</el-table-column>
				<el-table-column label='延迟检测时间' align='center'>
					<template slot-scope='scope'>{{ scope.row.check_time }} 分钟</template>
				</el-table-column>
				<el-table-column label='预付费' align='center'>
					<template slot-scope='scope'>{{ scope.row.prepayment }} 元</template>
				</el-table-column>
				<el-table-column label='费率' width='200'>
					<template slot-scope='scope'>
						<div style='line-height:26px;'>
							<div v-for='(v, i) in scope.row.class_rate'>{{rateIndexs[i]}}类费率 : {{v.q}}{{scope.row.charge_type == 1 ? '分钟' : '元/度'}}/{{v.w}}瓦</div>
						</div>
					</template>
					
				</el-table-column>
				<el-table-column label='操作' width='200'>
					<template slot-scope='scope'>
						<router-link :to='"/price/edit/" + scope.row.price_id' class='color-primary m-l-15'>编辑</router-link>
						<el-button size='mini' class='m-l-10' type='text' @click='deletePrice(scope.row.price_id)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<div class='m-t-30'>
				<pagination ref='pagination' :query='pageQuery' v-on:page='page($event)' url='price/priceList'></pagination>
			</div>
			
		</section>

	</div>
</template>

<script>
	import md5 from 'md5'
	import pagination from '@/components/pagination.vue'
	import { Request, confirm, successToast, errorToast } from '@/utils'
	
	let request = new Request()
	
	export default {
		name : 'price',
		data () {
			return {
				units : {1 : '元', 2 : '度'},
				filter : {
					price_name : ''
				}, 
				
				pageQuery : {
					
				},
				
				rateIndexs : ['一', '二', '三', '四'],
				
				listData : []
			}
		},
		
		components : {
			pagination
		},
		
		methods : {
			search : function(){
				let filter = Object.assign({}, this.filter)
				this.pageQuery = filter
				
				this.$nextTick(() => {
					this.$refs.pagination.initPage()
				})
	
			},
			
			page : function(rows){
				this.listData.splice(0)
				rows.forEach(v => {
					
					if(!Array.isArray(v.options)) {
						v.options = v.options ? JSON.parse(v.options) : []
					}
					
					if(!Array.isArray(v.class_rate)) {
						v.class_rate = v.class_rate ? JSON.parse(v.class_rate) : []
					}
					
					
					this.listData.push(v)
				})
				
			},
			
			deletePrice : function(priceId){ //删除代理商
				confirm.call(this, '确定删除该价格套餐吗', () => {
					request.delete('priceCombo/priceDelete?priceId=' + priceId, res => {
						if(res.code == 0){
							successToast('删除成功', this)
							this.$refs.pagination.getPage()
						}else{
							errorToast(res.msg, this)
						}
					})
				})
			}
				
		},
	
	activated () {
		if(!this.ISFIRST){
			this.ISFIRST = true
		}else{
			this.$refs.pagination.setInit(1)
			this.$refs.pagination.getPage()
		}
	}
	}
</script>